<template>
  <div class="dialog-page"  @click.stop.prevent="closeDialog">
    <div class="dialog-content col-8 py-4" @click.stop>
      <p class="text-center fs-5 text-primary mt-3 fw-bold">创建API KEY</p>
      <div class="input-material-group mb-3 col-10 mx-auto">
        <input
            v-model="api_name_from.name"
            class="input-material fw-bolder fs-5"
            placeholder="API名称"/>
        <span v-if="vaildName === 1" class="hint-text">账号为空哦</span>
      </div>

      <div class="input-material-group mb-5 col-10 mx-auto">
        <div class="float-right d-flex">
          <NButton color="#9E9D9D" @click="closeDialog" >
            关闭
          </NButton>
          <p class="w-5"></p>
          <NButton color="#2F80ED" @click="submitRequest">
            确认
          </NButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps, ref, onMounted} from 'vue';
import { useNotification} from "naive-ui";
import { createApiKeyAPI } from  "@/api"


const emit = defineEmits(['api_dialog-closed']);
const hint = useNotification();
const api_name_from = ref({name: ''})
const vaildName = ref<number>(0);                            // 账号提示框

function vailApiNameMethod() {
  vaildName.value = 0;
  if(api_name_from.value.name === '') {
    vaildName.value = 1;
    return true;
  }
}

function submitRequest() {
  vailApiNameMethod()
  createApiKeyAPI(api_name_from.value).then(res => {
      if (res.code === 200) {
        emit('api_dialog-closed')
      }
  })
}

/**
 * 关闭
 */
function closeDialog() {
  emit('api_dialog-closed')
}

</script>

<style scoped>
body, html {
  margin: 0;
  width: 100%;
  height: 100%; /* 确保body和html有全屏高度 */
}
.dialog-page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* 添加Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99;
}

.dialog-content {
  border-radius: 5px;
  background-color: #f1f1f1;
}
.input-material-group {
  position: relative;
  padding-top: 0.85rem
}

.input-material-group .input-material {
  letter-spacing: 1px;
  border: none;
  outline: none;
  background: none;
  padding: .375rem 0;
  border-bottom: 1px solid #40444b;
  display: block;
  width: 100%;
  text-align: center;
}

.hint-text {
  color: red;
}

</style>
